<template>
  <div>
    <van-nav-bar title="用户评论" left-text="返回" left-arrow @click-left="back" />
    <van-tabs v-model="active" @click="toggle(active)">
      <van-tab title="全部">
        <div class="userpl" v-for="(item, index) in plData" :key="index">
          <div class="user-img">
            <img class="auto" :src="item.userImg" alt="" />
          </div>
          <div class="user-content">
            <div class="userInfo">
              <div class="user-name">{{ item.userName }}</div>
              <div class="pl-time">{{ item.time }}</div>
            </div>
            <div class="user-desc">{{ item.desc }}</div>
            <div
              class="desc-img"
              :class="{ fl: item.plImg.length > 1 }"
              v-for="(i, j) in item.plImg"
              :key="j"
            >
              <img :src="i" alt="" width="120px" height="120px" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="有图">
        <div class="userpl" v-for="(item, index) in imagepl" :key="index">
          <div class="user-img">
            <img class="auto" :src="item.userImg" alt="" />
          </div>
          <div class="user-content">
            <div class="userInfo">
              <div class="user-name">{{ item.userName }}</div>
              <div class="pl-time">{{ item.time }}</div>
            </div>
            <div class="user-desc">{{ item.desc }}</div>
            <div
              class="desc-img"
              :class="{ fl: item.plImg.length > 1 }"
              v-for="(i, j) in item.plImg"
              :key="j"
            >
              <img :src="i" alt="" width="120px" height="120px" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="无图">
        <div class="userpl" v-for="(item, index) in noimagepl" :key="index">
          <div class="user-img">
            <img class="auto" :src="item.userImg" alt="" />
          </div>
          <div class="user-content">
            <div class="userInfo">
              <div class="user-name">{{ item.userName }}</div>
              <div class="pl-time">{{ item.time }}</div>
            </div>
            <div class="user-desc">{{ item.desc }}</div>
            <div
              class="desc-img"
              :class="{ fl: item.plImg.length > 1 }"
              v-for="(i, j) in item.plImg"
              :key="j"
            >
              <img :src="i" alt="" width="120px" height="120px" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="好评">
        <div class="userpl" v-for="(item, index) in goodpl" :key="index">
          <div class="user-img">
            <img class="auto" :src="item.userImg" alt="" />
          </div>
          <div class="user-content">
            <div class="userInfo">
              <div class="user-name">{{ item.userName }}</div>
              <div class="pl-time">{{ item.time }}</div>
            </div>
            <div class="user-desc">{{ item.desc }}</div>
            <div
              class="desc-img"
              :class="{ fl: item.plImg.length > 1 }"
              v-for="(i, j) in item.plImg"
              :key="j"
            >
              <img :src="i" alt="" width="120px" height="120px" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="差评">
        <div class="userpl" v-for="(item, index) in badpl" :key="index">
          <div class="user-img">
            <img class="auto" :src="item.userImg" alt="" />
          </div>
          <div class="user-content">
            <div class="userInfo">
              <div class="user-name">{{ item.userName }}</div>
              <div class="pl-time">{{ item.time }}</div>
            </div>
            <div class="user-desc">{{ item.desc }}</div>
            <div
              class="desc-img"
              :class="{ fl: item.plImg.length > 1 }"
              v-for="(i, j) in item.plImg"
              :key="j"
            >

              <img :src="i" alt="" width="120px" height="120px" />
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "Review",
  data() {
    return {
      active: 0,
      plData: [],
      imagepl:[],
      noimagepl:[],
      goodpl:[],
      badpl:[]
    };
  },
  created() {
    let pids = this.$route.query.pid;
    this.getReview();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    toggle(index) {
      console.log(index);
      this.imagepl=[]
      this.noimagepl=[]
      this.goodpl=[]
      this.badpl=[]
      if (index == 1) {
        this.plData.forEach((item)=>{
            if(item.type == "isimage"){
                this.imagepl.push(item);
            }
            console.log(this.imagepl);
        })
      }
      if (index == 2) {
        this.plData.forEach((item)=>{
            if(item.type == "noimage"){
                this.noimagepl.push(item);
            }
            console.log(this.noimagepl);
        })
      }
      if (index == 3) {
        this.plData.forEach((item)=>{
            if(item.pl == "good"){
                this.goodpl.push(item);
            }
            console.log(this.goodpl);
        })
      }
       if (index == 4) {
        this.plData.forEach((item)=>{
            if(item.pl == "bad"){
                this.badpl.push(item);
            }
            console.log(this.badpl);
        })
      }
    },
    //获取全部评论
    getReview() {
      this.axios({
        method: "get",
        url: "https://www.fastmock.site/mock/66e08ac95023c910f5b33460d6846511/rx/rxkf",
      }).then((res) => {
        console.log(res);
        let proplData = [];
        res.data.data.result.forEach((item) => {
          if (item.id == this.$route.params.pid) {
            proplData.push(item);
          }
        });
        this.plData = proplData;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.fl {
  display: inline-block;
  img {
    margin-right: 10px;
    width: 120px;
    height: 120px;
  }
}
.desc {
  padding-bottom: 100px;
}
.userpl {
  display: flex;
  margin: 15px 0;
  .user-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    // background-color: skyblue;
  }
  .user-content {
    flex: 1;
    // background-color: pink;
  }
  .userInfo {
    display: flex;
    justify-content: space-between;
  }
  .user-desc {
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 20px;
  }
}
.pl {
  display: flex;
  justify-content: space-between;
  height: 30px;
  align-items: center;
}
</style>